<template>
<div>
	<x-dialog v-model="show" style="width:100%">
		<div class="weui-dialog__hd showContent">
			<strong class="weui-dialog__title">{{name}}</strong>
		</div>
		<div class="weui-dialog__bd">
			<div v-if="freeData&&freeData.freeSelectNode">
				<divider>自由节点</divider>
				<select v-model="flowParam.destination" class="weui-input" @change="destChange()">
					<option value="">请选择下个节点</option>
					<option v-for="(val,key) in freeData.nodeNameMap" :value="key">{{val}}</option>
				</select>
			</div>
			<div v-if="freeData&&flowParam.destination && freeData.type!='no'">
				<divider>节点候选人</divider>
				<flexbox>
					<flexbox-item>
						<select v-model="newUser" class="weui-input" @change="newUserChange()">
							<option value="">请选择人员</option>
							<option v-for="(item,index) in freeData.nodeIdentitysMap[flowParam.destination]" :value="item.id">{{item.name}}</option>
						</select>
					</flexbox-item>
					<flexbox-item>
						<ab-cust-dialog v-if="flowParam.destination&&freeData.type=='allUser'" 
							:dialogSetting="{displayFields:[{showName:'姓名',columnName:'fullname_'}]}" dialogKey="userSelector" :model="newUsers">自由选择</ab-cust-dialog>
					</flexbox-item>
				</flexbox>
				<flexbox :gutter="0" wrap="wrap">
					<flexbox-item :span="1/3"  v-for="(item,index) in users">
						<x-button type="warn" class="fa fa-close " :mini="true" @click.native="removeUser(index)">{{item.name}}</x-button>
					</flexbox-item>
				</flexbox>
			</div>
			
			<div v-if="rejectData">
				<divider>驳回节点</divider>
				<select v-model="flowParam.destination" class="weui-input">
					<option value="">请选择驳回节点</option>
					<option v-for="(val,key) in rejectData" :value="key">{{val}}</option>
				</select>
			</div>
			
			<divider>意见/备注</divider>
			<textarea style="width: 261px; height: 130px;" v-model="flowParam.opinion" class="weui-input" ab-validate="{required:true}"></textarea>
		</div>
		<div class="weui-dialog__ft">
			<a class="weui-dialog__btn weui-dialog__btn_default" v-on:click="ok()">确定</a>
			<a class="weui-dialog__btn weui-dialog__btn_default" v-on:click="cancel()">取消</a>
		</div>
	</x-dialog>
</div>
</template>

<script>
import Vue from 'vue'
export default {
	props:['passConf','showDialog','name'],
  	data :function () {
    	return {
	    	flowParam:this.passConf,
	   		show:false,
	   		freeData : null,
	   		newUser : "",
	   		newUsers : [],
	   		users :[],
	   		rejectData :null,//自由驳回数据
	    }
   	},
   	methods: {
    	ok:function(){
	    	if(!this.flowParam.opinion){
	    		Vue.tools.toast("请完善意见！","warn");
	    		return ;
	    	}
	    	this.show = false;
	    	this.$emit('callback',this.flowParam);
	    },
	    setOpinion : function(str){
			this.flowParam.opinion =  str;
		},
		cancel:function(){
			this.show = false;
			this.$emit('cancel',this.flowParam);
		},
		destChange : function(val){
			if(!this.flowParam.destination){
	    		return "";
	    	}
			if (!this.flowParam.nodeUsers) {
	    		this.flowParam.nodeUsers = {};
			}
	    	this.users = this.flowParam.nodeUsers[this.flowParam.destination];
	    	if(!this.users){
	    		this.users = this.flowParam.nodeUsers[this.flowParam.destination] = [];
	    	}
		},
		newUserChange : function(val){
			if(!this.newUser){
	    		return;
	    	}
	    	var user;
	    	var that = this;
	    	this.freeData.nodeIdentitysMap[this.flowParam.destination].forEach(function(item){
	    		if(item.id == that.newUser){
	    			user = item;
	    		}
	    	});
	    	this.addUser(user);
	    	this.newUser = "";
		},
		addUser : function(user){
	    	var exist = false;
	    	this.users.forEach(function(item){
	    		if(item.id==user.id){
	    			exist = true;
	    		}
	    	});
	    	if(!exist){
	    		this.users.push(user);
	    	}
	    },
	    removeUser : function(index){
    		this.users = this.flowParam.nodeUsers[this.flowParam.destination];
	    	this.users.splice(index,1);
	    },
	    //处理自由节点选择
	    handleNodeFreeSelectUser : function(){
	    	var that = this;
	 	   	//获取自由候选人信息
	 	   	var url = Vue.__ctx + "/bpm/task/handleNodeFreeSelectUser";
	 	   	var post = Vue.baseService.post(url,this.flowParam);
	 	   	this.$vux.loading.show({ text: 'Loading' })
	 	   	Vue.tools.getResultData(post,function(data){
	 		   	that.freeData = data;
	 		   	if(data.freeSelectNode){
	 			   	that.$set(that.flowParam,"destination",that.flowParam.destination || "");
	 		   	}
	 		   	//开启了自由选择候选人同时只有一个节点，则默认选中
	 		   	if(data.type&&data.type!="no"&&JSON.stringify(data.nodeNameMap).indexOf(",")==-1){
	 			   	for(var key in data.nodeNameMap){
	 				   	that.flowParam.destination = key;
	 				   	that.destChange(key);
	 			   	}
	 		   	}
	 		   	that.$vux.loading.hide();
	 	   	});
	    },
	    //处理自由驳回
	    handleReject : function(){
	    	var that = this;
	 	   	//获取自由候选人信息
	 	   	var url = Vue.__ctx + "/bpm/task/getCanBackHistoryNodes";
	 	   	var post = Vue.baseService.postForm(url,{
	 	   		taskId : this.flowParam.taskId
	 	   	});
	 	   	this.$vux.loading.show({ text: 'Loading' })
	 	   	Vue.tools.getResultData(post,function(data){
	 	   		that.$vux.loading.hide();
	 	   		if(!data){
	 	   			return;
	 	   		}
	 	   		that.rejectData = data;
	 	   		that.flowParam.destination = "";
	 	   		if(JSON.stringify(data).indexOf(",")==-1){
 			   		for(var key in data){
 				   		that.flowParam.destination = key;
 			   		}
 		   		}
	 	   	});
	    },
   },
   watch:{
	   	showDialog:function(value,oldValue){
		   	this.show = value;
	   	},
	   	newUsers : function(newVal,oldVal){
		   	if(newVal.length==0){
			   	return;
		   	}
		   	var that = this;
		   	this.newUsers.forEach(function(item){
			   	that.addUser({
				   	id : item.id,
					name : item.name,
					type : "user"//用户
			   	});
		   	});
		   	this.newUsers = [];
		}
 	},
   	created :function(){
	   	this.usefulOpinion = [ "同意", "请注意，情况复杂！", "情况紧急，请尽快处理！", 	"驳回"  ];
	   	this.show = this.showDialog;
	   
	   	if(["agree","start","oppose"].includes(this.flowParam.action)){
		   	this.handleNodeFreeSelectUser();
	   	}
	   	
	   	if(["reject"].includes(this.flowParam.action)){
		   	this.handleReject();
	   	}
   	}
}


</script>
